<template>
  <div>
    <div class="componentTitle">有限空间信息</div>
    <div class="addDeviceBtn" @click="addCompany()">添加</div>
    <div class="tableBox">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="confinedSpaceName"
          label="有限空间名称"
          align="center"
          width="180"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="confinedSpaceTypeName"
          label="有限空间种类"
          width="180"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="riskFactor"
          label="风险因素"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="workersNumber"
          label="有限空间区域最大作业人数"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="allWorkers"
          label="有限空间区域总人数"
          :show-overflow-tooltip="true"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="dealWay"
          label="操作"
          width="100px"
        >
          <template slot-scope="scope">
            <el-button
              style="color: #269e8f"
              type="text"
              @click="addCompany(scope.row)"
              >编辑</el-button
            >
            <el-button
              style="color: #f56c6c"
              type="text"
              @click="deleteCompany(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="componentTitle">设备设施信息</div>
    <div class="addDeviceBtn" @click="addFacility()">添加</div>
    <div class="tableBox">
      <el-table :data="tableData2" style="width: 100%">
        <el-table-column
          prop="equipCode"
          label="设备编码"
          align="center"
          width="180"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="equipName"
          label="设备名称"
          width="180"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="companyCode"
          label="企业编码"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="placeCode"
          label="设备安装位置"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="equipTypeName"
          label="检测气体种类"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="equipFactory"
          label="设备厂家"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="setDate"
          label="安装日期"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="installAreaName"
          width="160"
          label="安装区域"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="equipStatus"
          label="设备运行"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <div
              v-if="scope.row.equipStatus == '0'"
              style="color: #f56c6c; font-weight: 500"
            >
              停用
            </div>
            <div v-if="scope.row.equipStatus == '1'">在用</div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="dealWay"
          label="操作"
          width="100px"
        >
          <template slot-scope="scope">
            <el-button
              style="color: #269e8f"
              type="text"
              @click="addFacility(scope.row)"
              >编辑</el-button
            >
            <el-button
              @click="delFacility(scope.row)"
              style="color: #f56c6c"
              type="text"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="componentTitle">数据采集设备信息</div>
    <div class="addDeviceBtn" @click="addDataCollection()">添加</div>
    <div class="tableBox">
      <el-table :data="tableData3" style="width: 100%">
        <el-table-column
          prop="equipCode"
          label="采集设备编码"
          align="center"
          width="180"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="companyCode"
          label="企业编码"
          width="180"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="equipName"
          label="采集设备名称"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="equipFactory"
          label="采集设备厂家"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="equipType"
          label="采集设备类别"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="gatewayNode"
          label="采集设备型号"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="setDate"
          label="安装时间"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="frequency"
          width="160"
          label="采集频率(秒)"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="dealWay"
          label="操作"
          width="100px"
        >
          <template slot-scope="scope">
            <el-button
              style="color: #269e8f"
              type="text"
              @click="addDataCollection(scope.row)"
              >编辑</el-button
            >
            <el-button @click="delDataCollection(scope.row)" style="color: #f56c6c" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="componentTitle">有限空间作业打卡记录</div>
    <div class="addDeviceBtn" @click="addClock()">添加</div>
    <div class="tableBox">
      <el-table :data="tableData4" style="width: 100%">
        <el-table-column
          prop="itemName"
          label="作业类型"
          align="center"
          width="180"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="taskProcessName"
          label="完成情况"
          width="180"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="taskPerson"
          label="监控人"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="taskTime"
          label="打卡日期"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="taskRemark"
          label="备注说明"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="dealWay"
          label="操作"
          width="100px"
        >
          <template slot-scope="scope">
            <el-button
              style="color: #269e8f"
              type="text"
              @click="addClock(scope.row)"
              >编辑</el-button
            >
            <el-button
              @click="deleteClick(scope.row)"
              style="color: #f56c6c"
              type="text"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="1218px"
      :before-close="handleClose1"
      :show-close="false"
      :append-to-body="true"
      custom-class="dialogCompany"
      top="10%"
    >
      <div class="dialogTitle" slot="title">{{ dialogTitle }}</div>
      <div class="dialogForm">
        <el-form
          ref="form"
          :rules="rules"
          :model="form1"
          label-width="200px"
          :inline="true"
        >
          <div class="formBox">
            <div class="formItem">
              <div class="left">
                <el-form-item label="有限空间名称">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form1.confinedSpaceName"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="有限空间种类">
                  <el-select
                    v-model="form1.confinedSpaceType"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in confinedSpaceList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="风险因素">
                  <el-input
                    placeholder="请输入"
                    v-model="form1.riskFactor"
                    :disabled="seeForm"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="有限空间区域最大作业人数">
                  <el-input
                    placeholder="请输入"
                    v-model="form1.workersNumber"
                    :disabled="seeForm"
                      type="number"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="有限空间区域总人数">
                  <el-input
                    placeholder="请输入"
                    v-model="form1.allWorkers"
                      type="number"
                    :disabled="seeForm"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose1">取 消</el-button>
        <el-button
          :disabled="seeForm"
          class="leftCancel"
          type="primary"
          @click="submitDialog1"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="deviceDialogVisible"
      width="1218px"
      :before-close="handleCloseDevice"
      :show-close="false"
      :append-to-body="true"
      custom-class="dialogCompany"
      top="10%"
    >
      <div class="dialogTitle" slot="title">{{ dialogTitle }}</div>
      <div class="dialogForm">
        <el-form
          ref="form"
          :rules="rules"
          :model="form2"
          label-width="200px"
          :inline="true"
        >
          <div class="formBox">
            <div class="formItem">
              <div class="left">
                <el-form-item label="设备编码">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form2.equipCode"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="设备名称">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form2.equipName"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="企业编码">
                  <el-input
                    placeholder="请输入"
                    v-model="form2.companyCode"
                    :disabled="seeForm"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="设备安装位置">
                  <el-input
                    placeholder="请输入"
                    v-model="form2.placeCode"
                    :disabled="seeForm"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="检测气体种类">
                  <el-select v-model="form2.equipType" placeholder="请选择">
                    <el-option
                      v-for="item in equipTypeList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="设备厂家">
                  <el-input
                    placeholder="请输入"
                    v-model="form2.equipFactory"
                    :disabled="seeForm"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="安装日期">
                  <el-date-picker
                    :disabled="seeForm"
                    v-model="form2.setDate"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期时间"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="安装区域">
                  <el-select v-model="form2.installArea" placeholder="请选择">
                    <el-option
                      v-for="item in installAreaList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="设备运行">
                  <el-select v-model="form2.equipStatus" placeholder="请选择">
                    <el-option
                      v-for="item in equipStatusList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCloseDevice">取 消</el-button>
        <el-button
          :disabled="seeForm"
          class="leftCancel"
          type="primary"
          @click="submitDialog2"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dataCollectDialogVisible"
      width="1218px"
      :before-close="handleCloseDataCollect"
      :show-close="false"
      :append-to-body="true"
      custom-class="dialogCompany"
      top="10%"
    >
      <div class="dialogTitle" slot="title">{{ dialogTitle }}</div>
      <div class="dialogForm">
        <el-form
          ref="form"
          :rules="rules"
          :model="form3"
          label-width="200px"
          :inline="true"
        >
          <div class="formBox">
            <div class="formItem">
              <div class="left">
                <el-form-item label="采集设备编码">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form3.equipCode"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="企业编码">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form3.companyCode"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="采集设备名称">
                  <el-input
                    placeholder="请输入"
                    v-model="form3.equipName"
                    :disabled="seeForm"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="采集设备厂家">
                  <el-input
                    placeholder="请输入"
                    v-model="form3.equipFactory"
                    :disabled="seeForm"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="采集设备类别">
                  <el-select v-model="form3.equipType" placeholder="请选择">
                    <el-option
                      v-for="item in equipTypeList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="采集设备型号">
                  <el-input
                    placeholder="请输入"
                    v-model="form3.gatewayNode"
                    :disabled="seeForm"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="安装时间">
                  <el-date-picker
                    :disabled="seeForm"
                    v-model="form3.setDate"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期时间"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="采集频率(秒)">
                  <el-input
                  type="number"
                    placeholder="请输入"
                    v-model="form3.frequency"
                    :disabled="seeForm"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="安装区域">
                  <el-select v-model="form3.installArea" placeholder="请选择">
                    <el-option
                      v-for="item in installAreaList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="设备运行状态">
                  <el-select v-model="form3.equipStatus" placeholder="请选择">
                    <el-option
                      v-for="item in equipStatusList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCloseDataCollect">取 消</el-button>
        <el-button
          :disabled="seeForm"
          class="leftCancel"
          type="primary"
          @click="submitDialog3"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="clickDialogVisible"
      width="1218px"
      :before-close="handleCloseClick"
      :show-close="false"
      :append-to-body="true"
      custom-class="dialogCompany"
      top="10%"
    >
      <div class="dialogTitle" slot="title">{{ dialogTitle }}</div>
      <div class="dialogForm">
        <el-form
          ref="form"
          :rules="rules"
          :model="form4"
          label-width="200px"
          :inline="true"
        >
          <div class="formBox">
            <div class="formItem">
              <div class="left">
                <el-form-item label="作业类型">
                  <el-select v-model="form4.itemName" placeholder="请选择">
                    <el-option
                      v-for="item in itemNameList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="完成情况">
                  <el-select v-model="form4.taskProcess" placeholder="请选择">
                    <el-option
                      v-for="item in taskNameList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="监控人">
                  <el-input
                    placeholder="请输入"
                    v-model="form4.taskPerson"
                    :disabled="seeForm"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="打卡日期">
                  <el-date-picker
                    :disabled="seeForm"
                    v-model="form4.taskTime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期时间"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="备注说明">
                  <el-input
                    placeholder="请输入"
                    v-model="form4.taskRemark"
                    :disabled="seeForm"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCloseClick">取 消</el-button>
        <el-button
          :disabled="seeForm"
          class="leftCancel"
          type="primary"
          @click="submitDialog4"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  youxianSpaceInfoList,
  saveOrUpdateYouxianSpaceInfo,
  deleteYouxianSpaceInfo,
  youxianSpaceRecordList,
  saveOrUpdateYouxianSpaceRecord,
  deleteYouxianSpaceRecord,
  youxianSpaceEquipInfoList,
  saveOrUpdateYouxianSpaceEquipInfo,
  deleteYouxianSpaceEquipInfo,
  youxianDataCollectionDeviceInfoList,
  saveOrUpdateYouxianDataCollectionDeviceInfo,
  deleteYouxianDataCollectionDeviceInfo
} from '@/api/corporatePersonalityDataDetail/finiteSpace'
import { dict } from '@/api/generalInformation'
export default {
  name: 'dustCompany',
  props: {},
  components: {},
  data() {
    return {
      input: '',
      value: '',
      tableData: [],
      form1: {
        confinedSpaceName: '',
        confinedSpaceType: '',
        riskFactor: '',
        workersNumber: '',
        allWorkers: '',
      },
      seeForm: false,
      dialogTitle: '新增传感指标数据',
      rules: {
        companyName: [
          {
            required: true,
            message: 'companyName is required',
            trigger: 'blur',
          },
        ],
      },
      dialogVisible: false,
      queryList: {
        companyId: '',
        companyCode: '',
        equipCompanyName: '',
        areaCode: '',
      },
      params: {
        pageNum: 1,
        pageSize: 10,
        companyId: '',
      },
      equipTypeList: [],
      bombControlList: [],
      props: { multiple: true, expandTrigger: 'hover' },
      dustRiskTechnologyList: [],
      deviceDialogVisible: false,
      form2: {
        equipCode: '',
        equipName: '',
        companyCode: '',
        placeCode: '',
        equipType: '',
        equipFactory: '',
        setDate: '',
        installArea: '',
        equipStatus: '',
      },
      tableData2: [],
      tableData3: [],
      dataCollectDialogVisible: false,
      tableData4: [],
      clickDialogVisible: false,
      form4: {
        itemName: '',
        taskProcess: '',
        taskPerson: '',
        taskTime: '',
        taskRemark: '',
      },
      confinedSpaceList: [],
      itemNameList: [],
      taskNameList: [],
      installAreaList: [],
      equipStatusList: [],
      params2: {
        pageNum: 1,
        pageSize: 10,
        companyCode: '',
      },
      form3: {
        equipCode: '',
        companyCode: '',
        equipName: '',
        equipFactory: '',
        equipType: '',
        gatewayNode: '',
        setDate: '',
        frequency: '',
        installArea: '',
        equipStatus: '',
      },
    }
  },
  created() {
    this.queryList = this.$route.query
    this.params.companyId = this.$route.query.companyId
    this.params2.companyCode = this.$route.query.companyCode

    this.youxianSpaceInfoList(this.params)
    this.confinedSpaceDict('confined_space_type')

    this.youxianSpaceRecordList(this.params)
    this.itemNameDict('item_name')
    this.taskNameDict('task_process')

    this.youxianSpaceEquipInfoList(this.params2)
    this.equipTypeDict('equip_type')
    this.installAreaDict('install_area')
    this.equipStatusDict('equip_status')

    this.youxianDataCollectionDeviceInfoList(this.params2)
  },
  methods: {
    async youxianSpaceInfoList(obj) {
      const res = await youxianSpaceInfoList(obj)
      this.tableData = res.data
    },
    addCompany(row) {
      if (!row) {
        this.dialogTitle = '新增有限空间信息'
      } else {
        this.form1 = row
        this.dialogTitle = '编辑有限空间信息'
      }
      this.dialogVisible = true
    },
    async submitDialog1() {
      console.log(this.form1)
      if (
        this.form1.confinedSpaceName === '' ||
        this.form1.confinedSpaceName === null ||
        this.form1.confinedSpaceName === undefined ||
        this.form1.confinedSpaceType === '' ||
        this.form1.confinedSpaceType === null ||
        this.form1.confinedSpaceType === undefined ||
        this.form1.riskFactor === '' ||
        this.form1.riskFactor === null ||
        this.form1.riskFactor === undefined ||
        this.form1.workersNumber === '' ||
        this.form1.workersNumber === null ||
        this.form1.workersNumber === undefined ||
        this.form1.allWorkers === '' ||
        this.form1.allWorkers === null ||
        this.form1.allWorkers === undefined
      ) {
        this.$message.warning('请先完善表格信息')
        return
      }
      const obj = {
        ...this.form1,
        companyId: this.queryList.companyId,
        companyCode: this.queryList.companyCode,
      }
      const res = await saveOrUpdateYouxianSpaceInfo(obj)
      this.renderSuccess(res)
      this.handleClose1()
    },
    async confinedSpaceDict(dictType) {
      const res = await dict({ dictType })
      this.confinedSpaceList = res.data
    },
    handleClose1() {
      this.youxianSpaceInfoList(this.params)
      this.dialogVisible = false
      this.form1 = {
        confinedSpaceName: '',
        confinedSpaceType: '',
        riskFactor: '',
        workersNumber: '',
        allWorkers: '',
      }
    },
    async deleteCompany(row) {
      const res = await deleteYouxianSpaceInfo({
        id: row.id,
        companyId: row.companyId,
      })
      this.deleteSuccess(res)
      this.handleClose1()
    },
    renderSuccess(res) {
      if (res.code == 1 && res.data) {
        this.$message.success('保存成功')
      } else {
        this.$message.error('保存失败')
      }
    },
    deleteSuccess(res) {
      if (res.code == 1 && res.data) {
        this.$message.success('删除成功')
      } else {
        this.$message.error('删除失败')
      }
    },
    addFacility(row) {
      if (!row) {
        this.dialogTitle = '新增设备设施信息'
      } else {
        this.form2 = row
        this.dialogTitle = '编辑设备设施信息'
      }
      this.deviceDialogVisible = true
    },
    handleCloseDevice() {
      this.deviceDialogVisible = false
      this.youxianSpaceEquipInfoList(this.params2)
      this.form2 = {
        equipCode: '',
        equipName: '',
        companyCode: '',
        placeCode: '',
        equipTypeName: '',
        equipFactory: '',
        setDate: '',
        installArea: '',
        equipStatus: '',
      }
    },
    async submitDialog2() {
      if (
        this.form2.equipCode === '' ||
        this.form2.equipCode === null ||
        this.form2.equipCode === undefined ||
        this.form2.equipName === '' ||
        this.form2.equipName === null ||
        this.form2.equipName === undefined ||
        this.form2.companyCode === '' ||
        this.form2.companyCode === null ||
        this.form2.companyCode === undefined ||
        this.form2.placeCode === '' ||
        this.form2.placeCode === null ||
        this.form2.placeCode === undefined ||
        this.form2.equipType === '' ||
        this.form2.equipType === null ||
        this.form2.equipType === undefined ||
        this.form2.equipFactory === '' ||
        this.form2.equipFactory === null ||
        this.form2.equipFactory === undefined ||
        this.form2.setDate === '' ||
        this.form2.setDate === null ||
        this.form2.setDate === undefined ||
        this.form2.installArea === '' ||
        this.form2.installArea === null ||
        this.form2.installArea === undefined ||
        this.form2.equipStatus === '' ||
        this.form2.equipStatus === null ||
        this.form2.equipStatus === undefined
      ) {
        this.$message.warning('请先完善表格信息')
        return
      }
      const obj = {
        ...this.form2,
        companyId: this.queryList.companyId,
        companyCode: this.queryList.companyCode,
      }
      const res = await saveOrUpdateYouxianSpaceEquipInfo(obj)
      this.renderSuccess(res)
      this.handleCloseDevice()
    },
    async youxianSpaceEquipInfoList(obj) {
      const res = await youxianSpaceEquipInfoList(obj)
      this.tableData2 = res.data.list
    },
    async equipTypeDict(dictType) {
      const res = await dict({ dictType })
      this.equipTypeList = res.data
    },
    async installAreaDict(dictType) {
      const res = await dict({ dictType })
      this.installAreaList = res.data
    },
    async equipStatusDict(dictType) {
      const res = await dict({ dictType })
      this.equipStatusList = res.data
    },
    async delFacility(row) {
      const res = await deleteYouxianSpaceEquipInfo({
        id: row.id,
        companyId: row.companyId,
      })
      this.deleteSuccess(res)
      this.handleCloseDevice()
    },
    addDataCollection(row) {
      if (!row) {
        this.dialogTitle = '新增数据采集设备信息'
      } else {
        this.form3 = row
        this.dialogTitle = '编辑数据采集设备信息'
      }
      this.dataCollectDialogVisible = true
    },
    async youxianDataCollectionDeviceInfoList(obj) {
      const res = await youxianDataCollectionDeviceInfoList(obj)
      this.tableData3 = res.data.list
    },
    handleCloseDataCollect() {
      this.dataCollectDialogVisible = false
      this.youxianDataCollectionDeviceInfoList(this.params2)
      this.form3 = {
        equipCode: '',
        companyCode: '',
        equipName: '',
        equipFactory: '',
        equipType: '',
        gatewayNode: '',
        setDate: '',
        frequency: '',
        installArea: '',
        equipStatus: '',
      }
    },
    async submitDialog3() {
      if (
        this.form3.equipCode === '' ||
        this.form3.equipCode === null ||
        this.form3.equipCode === undefined ||
        this.form3.companyCode === '' ||
        this.form3.companyCode === null ||
        this.form3.companyCode === undefined ||
        this.form3.equipName === '' ||
        this.form3.equipName === null ||
        this.form3.equipName === undefined ||
        this.form3.equipFactory === '' ||
        this.form3.equipFactory === null ||
        this.form3.equipFactory === undefined ||
        this.form3.equipType === '' ||
        this.form3.equipType === null ||
        this.form3.equipType === undefined ||
        this.form3.gatewayNode === '' ||
        this.form3.gatewayNode === null ||
        this.form3.gatewayNode === undefined ||
        this.form3.setDate === '' ||
        this.form3.setDate === null ||
        this.form3.setDate === undefined ||
        this.form3.frequency === '' ||
        this.form3.frequency === null ||
        this.form3.frequency === undefined ||
        this.form3.installArea === '' ||
        this.form3.installArea === null ||
        this.form3.installArea === undefined ||
        this.form3.equipStatus === '' ||
        this.form3.equipStatus === null ||
        this.form3.equipStatus === undefined 
      ) {
        this.$message.warning('请先完善表格信息')
        return
      }
      const obj = {
        ...this.form3,
        companyId: this.queryList.companyId,
        companyCode: this.queryList.companyCode,
      }
      const res = await saveOrUpdateYouxianDataCollectionDeviceInfo(obj)
      this.renderSuccess(res)
      this.handleCloseDataCollect()
    },
    async delDataCollection(row) {
      const res = await deleteYouxianDataCollectionDeviceInfo({
        id: row.id,
        companyId: row.companyId,
      })
      this.deleteSuccess(res)
      this.handleCloseDataCollect()
    },
    async youxianSpaceRecordList(obj) {
      const res = await youxianSpaceRecordList(obj)
      this.tableData4 = res.data
    },
    async itemNameDict(dictType) {
      const res = await dict({ dictType })
      this.itemNameList = res.data
    },
    async taskNameDict(dictType) {
      const res = await dict({ dictType })
      this.taskNameList = res.data
    },
    addClock(row) {
      if (!row) {
        this.dialogTitle = '新增有限空间作业打卡记录'
      } else {
        this.form4 = row
        this.dialogTitle = '编辑有限空间作业打卡记录'
      }
      this.clickDialogVisible = true
    },
    handleCloseClick() {
      this.clickDialogVisible = false
      this.youxianSpaceRecordList(this.params)
      this.form4 = {
        itemName: '',
        taskProcess: '',
        taskPerson: '',
        taskTime: '',
        taskRemark: '',
      }
    },
    async submitDialog4() {
      console.log(this.form4)
      if (
        this.form4.itemName === '' ||
        this.form4.itemName === null ||
        this.form4.itemName === undefined ||
        this.form4.taskProcess === '' ||
        this.form4.taskProcess === null ||
        this.form4.taskProcess === undefined ||
        this.form4.taskPerson === '' ||
        this.form4.taskPerson === null ||
        this.form4.taskPerson === undefined ||
        this.form4.taskTime === '' ||
        this.form4.taskTime === null ||
        this.form4.taskTime === undefined ||
        this.form4.taskRemark === '' ||
        this.form4.taskRemark === null ||
        this.form4.taskRemark === undefined
      ) {
        this.$message.warning('请先完善表格信息')
        return
      }
      const obj = {
        ...this.form4,
        companyId: this.queryList.companyId,
        companyCode: this.queryList.companyCode,
      }
      const res = await saveOrUpdateYouxianSpaceRecord(obj)
      this.renderSuccess(res)
      this.handleCloseClick()
    },
    async deleteClick(row) {
      const res = await deleteYouxianSpaceRecord({
        id: row.id,
        companyId: row.companyId,
      })
      this.deleteSuccess(res)
      this.handleCloseClick()
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.componentTitle {
  color: #303133;
  font-size: 16px;
  font-weight: bold;
}
.dustList {
  padding-top: 15px;
  color: #909399;
  margin-bottom: 40px;
  .dustLabel {
    display: flex;
    padding-bottom: 15px;
    border-bottom: 1px solid #dcdfe5;
    .dustLabelItem {
      width: 18%;
    }
  }
  .dustValue {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #dcdfe5;
    .dustValueItem {
      width: 18%;
      .el-input {
        width: 135px;
      }
      .el-select {
        width: 250px;
      }
    }
    .edit {
      color: #269e8f;
      cursor: pointer;
    }
  }
}
.dustOtherList {
  padding-top: 15px;
  color: #909399;
  margin-bottom: 40px;
  .dustLabel {
    display: flex;
    padding-bottom: 15px;
    border-bottom: 1px solid #dcdfe5;
    .dustLabelItem {
      width: 45%;
    }
  }
  .dustValue {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #dcdfe5;
    .dustValueItem {
      width: 45%;
      .el-input {
        width: 135px;
      }
      .el-select {
        width: 250px;
      }
    }
    .edit {
      color: #269e8f;
      cursor: pointer;
    }
  }
}
.addDeviceBtn {
  width: 78px;
  height: 32px;
  background-color: #269e8f;
  color: #fff;
  text-align: center;
  line-height: 32px;
  border-radius: 3px;
  margin-top: 15px;
  cursor: pointer;
}

.dialogTitle {
  text-align: center;
  border-bottom: 1px solid #d8d8d8;
  font-size: 20px;
  font-weight: 500;
  padding: 22px 0 19px 0;
}
::v-deep .el-dialog__header {
  padding: 0 30px;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  .leftCancel {
    margin-left: 77px;
    background-color: #269e8f;
    border: 1px solid #269e8f;
  }
}
.dialogForm {
  .label-class::v-deep .el-form-item__label {
    white-space: pre-line !important;
    line-height: 18px !important;
  }
  .formBox {
    .formItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .left {
      width: 50%;
    }
    .right {
      width: 50%;
    }
    ::v-deep .el-input {
      width: 260px;
    }
  }
}
::v-deep.dialogCompany {
  border-radius: 20px;
}
.tableBox {
  margin-bottom: 20px;
}
</style>
